<!DOCTYPE html>
<html>
	<head>
		#include('head.html',{title:cView.vName})
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/comment/a-emoji.css"/>
		<style type="text/css">

			.am-tabs .left-jiantou{
				width: 20%;
				margin:.5em .8em;
				/*text-align: center;*/
			}
			body{
                    background-image: url(images/bgc.jpg);
            }
			.am-tabs-bd h3{
				font-weight: bold;
			}
			.am-tabs-bd{
				font-size: 18px;
			}
			.detail-style{
				width:100%;
				height: 45px;
				margin-top: 12px;
				background-color: white;
				line-height: 45px;
			}
			#accordion{
				margin-top: 15px;
			}


/*详情页导航栏样式*/
			.scrollspy-nav {
		    top: 0;
		    z-index: 100;
		    background: #4caf50;
		    width: 100%;
		    /*padding: 0 0px;*/
		  }

		  .scrollspy-nav ul {
		    margin: 0;
		    padding: 0;
		  }

		  .scrollspy-nav li {
		    display: inline-block;
		    list-style: none;
		  }

		  .scrollspy-nav a {
		    color: white;
		    padding: 10px 5px;
		    display: inline-block;
		  }

		  .scrollspy-nav a.am-active {
		    color: #fff;
		    font-weight: bold;
		  }

		  .am-panel {
		    margin-top: 20px;
		  }

/*评论界面样式*/
		.box{
    		position: fixed;
    		bottom: 0;
    		width: 100%;
    		left: 0;
    	}
    	#display{
    	 margin-bottom: 100px;
    		overflow: auto;
    	}
    	.bg-orange{
			color:#607D8B!important;
			text-align: center;
			border-radius: 100px;
			position: relative;
			top: 10px;
			font-size: 15px;
			font-weight: bold;
    	}

		.InputBox .text{
			margin-top: 0;
		}

		.commentBtn{
			bottom: 9px;
			right: 0px;
			font-size: 14px;
			padding: 1px 5px !important;
			background: #00BCD4;
			border: 0;
			color: #fff;
			width: auto !important;
		}
		.am-popup-hd{
			border-bottom: 0;
		}
		.am-popup{
			top: 5%;
			height: 95%;
		}
		.am-popup-bd{
			padding: 0px;
		}
		#myPic img{
			height: 48px!important;
		}
		#myPic li{
			padding: 1px 0 1px 1px;
		}
		#myPic ul{
			padding: 0;
		}
		</style>
	</head>
	<body>
	#if(cView!=null)
		<div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
		  <ul class="am-tabs-nav am-nav am-nav-tabs" style="background-color: rgba(255, 255, 255, 0.95);position: fixed;width: 100%;z-index: 999;">
		  	<li class="left-jiantou"><i class="am-success am-icon-chevron-left "></i></li>
		    <li class="am-active"><a href="javascript: void(0)">景点</a></li>
		    <li><a href="javascript: void(0)">详情</a></li>
		    <li><a href="javascript: void(0)">评价</a></li>
		  </ul>
			<script>
                if (travel.checkApp()) {
                    $(".am-icon-chevron-left").hide();
                }
			</script>
		  <!-- <hr> -->
		  <div class="am-tabs-bd" style="padding-top: 41px;">
		    <div class="am-tab-panel am-active" >
			    <div style="background-color: white;padding-bottom: 4px;">
			    	 <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' >
						  <ul class="am-slides">
							  #for(pic : cPictureList)
							  <li><img src="images/picture/${pic.pFilename}"> </li>
							  #end
						  </ul>
						</div>
					<div style="margin-top: 4px;">
						<!--<h2 style="font-weight: bolder;">&nbsp;${cView.vName}</h2>-->
						<span style="font-size: 16px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${cView.vDescribe}</span>
					</div>
			    </div>

			    <div class="am-panel-group" id="accordion">
					<div class="am-panel">
						<div class="am-panel-hd" style="color: gray;font-size: 17px;"><i class="am-icon-map-marker am-icon-fw"></i>&nbsp;&nbsp;地理位置</div>
						<div class="am-panel-bd">
							<span style="margin-left: 32px;font-size: 16px;">${cView.vPosition}</span>
						</div>
					</div>
					<div class="am-panel">
						<div class="am-panel-hd" style="color: gray;font-size: 17px;""><i class="am-icon-file am-icon-fw"></i>&nbsp;&nbsp;特色介绍</div>
						<div class="am-panel-bd">
							<p style="margin-left: 32px;font-size: 16px;">
								${cView.vSpecial}
							</p>
						</div>
					</div>
				</div>
			</div>


		    <div class="am-tab-panel">
				<div class="am-panel am-panel-default" id="about">
					<div class="am-panel-hd bg-orange" >路线定制</div>
					<div class="am-panel-bd">
						${cView.vRoute}
					</div>
				</div>


				<div class="am-panel am-panel-default" id="team">
				  <div class="am-panel-hd bg-orange">景点攻略</div>
				  <div class="am-panel-bd">
					  ${cView.vStrategy}
				  </div>
				</div>

				<div class="am-panel am-panel-default" id="ep">
				  <div class="am-panel-hd bg-orange">饮食住行</div>
				  <div class="am-panel-bd">
					  ${cView.vEat}
				  </div>
				</div>

		    </div>


		    <div class="am-tab-panel">
		     	<div id="display">
					<div class="commentBox">
						#set(i=0)
						#for(comment : cCommentList)
						<div class="li">
							<div class="icon">
								<a href="person_center?uId=${comment.cUid}"><img src="images/headicon/${comment.uicon}" style="width: 40px;"/></a>
							</div>
							<div class="content">
									<div class="name" style="margin-top:0;">
										<a href="person_center?uId=${comment.cUid}">${comment.uname}</a>
										<span style="float:right;font-size: 13px;" onclick="commentd(${comment.cId},'${comment.uname}','${comment.uicon}')">回复</span>
									</div>
								<div class="time">
									${comment.time}
								</div>
								<div class="text">
									${comment.cContent.replace("script","[非法字段]")}
								</div>
								<div id="img" style="margin-bottom: 8px;">
									<ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default" style="margin-left: -10px;" data-am-gallery="{ pureview: true }" >
										#for(pic : commentPic[i])
										<li>
											<div class="am-gallery-item">
												<img src="images/picture/${pic.pFilename}"/>
											</div>
										</li>
										#end
									</ul>
								</div>
								#if(comment.cRead>0)
								<p onclick="commentd(${comment.cId},'${comment.uname}','${comment.uicon}')" style="text-align: center;border-radius: 50px;background: rgba(239, 230, 230, 0.3);">有${comment.cRead}条回复</p>
								#end
							</div>
						</div>
						#set(i=i+1)
						#end
					</div>
				</div>
		    </div>
		  </div>
		</div>

		<input id="load" style="display: none;" type="file" class="btn btn-primary" name="pictures[]" accept="image/png, image/jpeg" onchange="upload(this.files)" multiple/>
		<div class="box" style="z-index: 999;display: none;">
			<div id="myPic" style="background: #eee;">
				<span id="delAll" style="float: right;margin: 0 5px;height: 0;">&times;</span>
				<ul data-am-widget="gallery" class="am-gallery am-avg-sm-6 am-gallery-default" style="" data-am-gallery="{ pureview: true }" >

				</ul>
			</div>
		</div>
	<button data-am-modal="{target: '#my-popup'}" style="display: none" id="commentdetail"></button>
	<div class="am-popup" id="my-popup">
		<div class="am-popup-inner">
			<div class="am-popup-hd">
				<h4 class="am-popup-title"><img src="" style="width: 43px; height: 43px; border-radius: 100%;padding: 4px;margin-right: 10px;"><span></span></h4>
      			<span data-am-modal-close class="am-close" style="font-size: 30px;left: 15px;opacity: 1;">&times;</span>
			</div>
			<div class="am-popup-bd">
				<iframe id="position" src=""></iframe>
			</div>
		</div>
	</div>
	</body>
	<script type="text/javascript">
        var flag = 0;
        var vId = ${cView.vId};
        #if (user!=null)
            flag = 1;
			var username = "${user.uName}";
			var uicon = "${user.uPic}";
        #end
	</script>
	<script src="js/comment/a-emoji.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(".left-jiantou").click(function() {
			history.back();
		})
//  	$('.Main').myEmoji();
		var e = A_Emoji($('.box'));
		// for(var i=0;i<10;i++){
		// 	addRow();
		// }
		checkText();
    </script>
	<script type="text/javascript">
        $(".am-nav-tabs").find($("li")[3]).click(function(){
            $(".box").show();
        });
        $(".am-nav-tabs").find($("li")[0]).click(function(){
            $(".box").hide();
        });
        $(".am-nav-tabs").find($("li")[1]).click(function(){
            $(".box").hide();
        });
        $(".am-nav-tabs").find($("li")[2]).click(function(){
            $(".box").hide();
        });
        var img = $("#img img");
        img.height(img.width());

        $("#position").css({"height":$("body").height()*0.95 - 50,"width":"100%"});
        //评论详情
        function commentd(cid,uname,uicon) {
            $('#position').attr('src', "/comment_detail?cId="+cid);
            $(".am-popup-title img").attr("src","/images/headicon/"+uicon);
            $(".am-popup-title span").text(uname);
			$("#commentdetail").click();
        }
        $(".am-close").click(function(){
            $('#position').attr('src', "");
        });


        $(".selectPic").click(function () {
            $("#load").click();
        });
        $("#delAll").click(function () {
			$("#myPic li").remove();
			$("#myPic").hide();
            $("img[alt='待上传']").parents("li").remove();
            imgArr = [];
            str = "";
            filesize = 0;
            filenum = 0;
        });
	</script>
	<script>
		var imgArr = [];
        $("#myPic").hide();

        var str = "";
        var filesize = 0;
        var filenum = 0;
        function upload(f) {
            $("#myPic").show();
            // $("img[alt='待上传']").parents("li").remove();
            // imgArr = [];
            // var str = "";
            // var filesize = 0;
            // var filenum = 0;
            for (var i = 0; i < f.length; i++) {
                filesize += f[i].size;
                console.log(filesize);
                if (filesize>10000000){
                    alert("选择图片总大小不超过10Mb！")
                    $("#delAll").click();
                    break;
                }
                if (i>=10) {
                    alert("最多可选择10张图片！")
                    break;
				}
                var reader = new FileReader();
                reader.readAsDataURL(f[i]);
                reader.onload = function(e) {
                    str += '<li>\n' +
                        '\t\t\t\t\t\t<div class="am-gallery-item">\n' +
                        '\t\t\t\t\t\t\t<img src="' + e.target.result + '" id="uploading" alt="待上传"/>\n' +
                        '\t\t\t\t\t\t</div>\n' +
                        '\t\t\t\t\t</li>';
                    $("#myPic ul").html(str);
                    if (filesize>10000000){
                        $("#delAll").click();
                        console.log("more 10mb")
                        return;
                    }
                    if (++filenum>10) {
                        console.log("more 10 size")
                        return;
                    }
                    imgArr.push(e.target.result);
                    // alert(str)
                }
            }

            console.log(imgArr)
        }
	</script>
	#else
	<div style="text-align: center;margin-top: 20%;">该景点不存在！</div>
	#end
</html>
